<template>
  <p>错误信息文本显示提示: <el-switch v-model="state.showMessage" /></p>
  <v-form ref="vFormRef" :fields="fields" :model="state.formIn" :showMessage="state.showMessage">
    <template #btnGroup>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button @click="reset">Reset</el-button>
    </template>
  </v-form>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'

  const vFormRef = ref()

  const fields = [
    {
      subassembly: 'ElInput',
      label: 'Activity name',
      prop: 'name',
      required: true,
      subOptions: {},
    },
    {
      subassembly: 'VSelect',
      label: 'Activity zone',
      prop: 'region',
      subOptions: {
        options: [
          { label: 'Zone one', value: 'shanghai' },
          { label: 'Zone two', value: 'beijing' },
        ],
      },
    },
    {
      subassembly: 'ElInput',
      label: '年龄',
      prop: 'age',
      subOptions: {
        rules: [
          { required: true, message: 'age is required' },
          { type: 'number', message: 'age must be a number' },
        ],
      },
    },
    { custom: true, prop: 'btnSlot' },
  ]

  const state = ref({
    formIn: {
      name: '',
      region: '',
      age: '',
    },
    showMessage: false,
  })

  const onSubmit = async () => {
    const valid = await vFormRef.value.validate()
    console.log('valid', valid)
    if (!valid) return
  }

  const reset = () => {
    vFormRef.value.resetFields()
  }
</script>
